<!--
 * @Author: daidai
 * @Date: 2022-02-28 16:16:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-10-25 09:18:22
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
-->
<template>
  <div>
    <span v-if="parentData=='云南上云丰花卉有限公司'">
      <div ref="chart" style="width: 100%; height:250px;"></div>
    </span>
    <span v-if="parentData=='销售部'">
      <el-tabs v-model="deptActiveName" @tab-click="handleDeptClick" style="margin-top: -20px;">
        <el-tab-pane label="本月目标达成" name="firstdpt">
          <div ref="dptc4" style="width: 100%; height:250px;margin-top: -5px;"></div>
        </el-tab-pane>
        <el-tab-pane label="年接单靠前片区" name="seconddpt">
          <div ref="dptc1" style="width: 100%; height:250px;margin-top: -5px;"></div>
        </el-tab-pane>
        <el-tab-pane label="年接单靠后片区" name="thirddpt">
          <div ref="dptc2" style="width: 100%; height:250px;margin-top: -5px;"></div>
        </el-tab-pane>
        <el-tab-pane label="代理商年接单" name="fourthdpt">
          <div ref="dptc3" style="width: 100%; height:250px;margin-top: -5px;"></div>
        </el-tab-pane>
      </el-tabs>
    </span>
    <span v-if="parentData!='云南上云丰花卉有限公司'&&parentData!='销售部'">
      <el-tabs v-model="areaActiveName" @tab-click="handleAreaClick" style="margin-top: -20px;">
        <el-tab-pane label="第一季度" name="first">
          <div ref="areac1" style="width: 100%; height:250px;margin-top: -5px;"></div>
        </el-tab-pane>
        <el-tab-pane label="第二季度" name="second">
          <div ref="areac2" style="width: 100%; height:250px;margin-top: -5px;"></div>
        </el-tab-pane>
        <el-tab-pane label="第三季度" name="third">
          <div ref="areac3" style="width: 100%; height:250px;margin-top: -5px;"></div>
        </el-tab-pane>
        <el-tab-pane label="第四季度" name="fourth">
          <div ref="areac4" style="width: 100%; height:250px;margin-top: -5px;"></div>
        </el-tab-pane>
      </el-tabs>
    </span>
  </div>
  <!-- <Echart id="leftCenter" :options="options" class="left_center_inner" v-if="pageflag" ref="charts" /> -->
  <!-- <Reacquire v-else @onclick="getData" style="line-height:200px">
    重新获取
  </Reacquire> -->
</template>

<script>
import { currentGET } from 'api/modules'
import axios from 'axios';
import * as echarts from 'echarts';

export default {
  props: ['parentData'],
  data() {
    return {
      deptActiveName: "firstdpt",
      areaActiveName: "first",
      options: {},
      // hostIP: "localhost",
      hostIP: "116.54.4.93",
      countUserNumData: {
        lockNum: 0,
        onlineNum: 0,
        offlineNum: 0,
        totalNum: 0,
      },
      pageflag: true,
      timer: null
    };
  },
  created() {
    this.getData()
  },
  watch: {
    parentData(newVal) {
      console.log('片区目标-子组件的数据已更新:', newVal);
      this.getData();
    },
  },
  mounted() {
  },
  beforeDestroy() {
    this.clearData()
  },
  methods: {
    handleDeptClick(tab, event){
      if(tab.index==1){
        const dptc1 = echarts.init(this.$refs.dptc1);
        this.$nextTick(() => {
          dptc1 && dptc1.resize();
        });
      }else if(tab.index==2){
        const dptc2 = echarts.init(this.$refs.dptc2);
        this.$nextTick(() => {
          dptc2 && dptc2.resize();
        });
      }else if(tab.index==3){
        const dptc3 = echarts.init(this.$refs.dptc3);
        this.$nextTick(() => {
          dptc3 && dptc3.resize();
        });
      }else if(tab.index==0){
        const dptc4 = echarts.init(this.$refs.dptc4);
        this.$nextTick(() => {
          dptc4 && dptc4.resize();
        });
      }
    },
    handleAreaClick(tab, event){
      if(tab.index==0){
        const areac1 = echarts.init(this.$refs.areac1);
        this.$nextTick(() => {
          areac1 && areac1.resize();
        });
      }else if(tab.index==1){
        const areac2 = echarts.init(this.$refs.areac2);
        this.$nextTick(() => {
          areac2 && areac2.resize();
        });
      }else if(tab.index==2){
        const areac3 = echarts.init(this.$refs.areac3);
        this.$nextTick(() => {
          areac3 && areac3.resize();
        });
      }else if(tab.index==3){
        const areac4 = echarts.init(this.$refs.areac4);
        this.$nextTick(() => {
          areac4 && areac4.resize();
        });
      }
    },
    clearData() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },
    getData() {
      console.log("--------片区目标------->",this.parentData)
      this.pageflag = true;
      axios.get('http://'+this.hostIP+':9500/api/bigscreen/getDeptArea?area='+this.parentData, { withCredentials: true }) // 使用 params 参数传递查询参数
        .then(res => {
          if (!this.timer) {
            // console.log("公司目标达成", res);
          }
          if(res.code===200){
            let labels  = [];
            // res.data.company.map((item) =>{
            //   if(this.parentData=="云南上云丰花卉有限公司"||this.parentData=="销售部"){
            //     labels.push(item.area);
            //   }else{
            //     labels.push(item.month+"月");
            //   }
            // })
            if(this.parentData=="云南上云丰花卉有限公司"){
              res.data.company.map((item) =>{
                labels.push(item.area);
              })
              const chart = echarts.init(this.$refs.chart);
              let option = {
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                    type: 'shadow'
                  },
                  formatter: function (params) {
                    return params[0].data.extraInfo
                  }
                },
                legend: {
                  data: ['出库达成','接单目标'],
                  textStyle: {
                    color: 'aqua'   // 图例文字颜色
                  }
                },
                grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true,
                  height: '90%',
                },
                yAxis: {
                  data: labels,
                  inverse: true,
                  axisLine: { show: false },
                  axisTick: { show: false },
                  axisLabel: {
                    textStyle: {
                      color: 'aqua', // 设置 X 轴标签字体颜色为红色
                      fontSize: 14,    // 设置 X 轴标签字体大小，
                    }
                  },
                  axisPointer: {
                    label: {
                      show: true,
                      margin: 30
                    }
                  }
                },
                xAxis: {
                  splitLine: { show: false },
                  axisLabel: { show: false },
                  axisTick: { show: false },
                  axisLine: { show: false }
                },
                series: [
                  {
                    name: '出库达成',
                    type: 'pictorialBar',
                    label: {
                      show: true,
                      position: 'right',
                      formatter: '{c} 万元',
                      textStyle: {
                        color: 'lightgreen', // 设置标签字体颜色为红色
                        fontSize: 10,    // 设置标签字体大小
                      }
                    },
                    symbolRepeat: true,
                      symbolSize: ['80%', '60%'],
                      barCategoryGap: '40%',
                      universalTransition: {
                        enabled: true,
                        delay: function (idx, total) {
                          return (idx / total) * 1000;
                        }
                      },
                      itemStyle: {
                        color: 'lightgreen'
                      },
                      data: res.data.company.map(item => ({
                      value: item.finished,
                      name: item.area,
                      extraInfo: "部门："+item.area+"<br/>接单目标: "+item.target+"万元<br />出库达成："+item.finished+"万元<br />出库达成率: "+item.finishRate
                    })),
                    symbol: 'path://M699.456904 272.707009c21.340027-27.111474 33.708729-56.981782 33.708729-85.149309 0-45.924959-28.65769-123.007545-220.758869-123.007545-82.418105 0-220.759893 15.977903-220.759893 123.007545 0 28.167526 12.369725 58.037834 33.709753 85.149309-140.764977 90.381473-235.19158 263.618003-235.19158 367.193986 0 195.555861 165.712159 321.939293 422.24172 321.939293 256.530584 0 422.242743-126.384455 422.242743-321.939293C934.649508 536.326035 840.222905 363.062899 699.456904 272.707009L699.456904 272.707009zM512.406764 900.402007c-198.441585 0-359.308389-83.243913-359.308389-260.499989 0-101.256148 124.219139-304.465317 287.302425-353.689415-49.89334-23.915689-85.871763-67.701938-85.871763-98.653881 0-44.50768 70.716598-61.569264 157.876704-61.569264s157.824515 17.060561 157.824515 61.569264c0 30.951943-35.924187 74.738192-85.818551 98.653881 163.082262 49.224098 287.302425 252.433266 287.302425 353.689415C871.715153 817.158095 710.848349 900.402007 512.406764 900.402007L512.406764 900.402007zM612.039949 576.168462c17.421788 0 31.493272-13.762445 31.493272-30.720675s-14.071484-30.719652-31.493272-30.719652l-43.398416 0 48.244794-47.058782c12.266371-12.009522 12.266371-31.441083 0-43.450604-12.267395-11.983939-32.213679-11.983939-44.533262 0l-59.585073 58.192354-59.58405-58.192354c-12.267395-11.983939-32.162514-11.983939-44.533262 0-12.268418 12.009522-12.268418 31.442106 0 43.450604l48.243771 47.058782L412.774603 514.728134c-17.369599 0-31.493272 13.762445-31.493272 30.719652s14.123672 30.720675 31.493272 30.720675l68.139913 0 0 33.425274L409.940045 609.593735c-17.370623 0-31.493272 13.814634-31.493272 30.720675 0 17.009396 14.122649 30.720675 31.493272 30.720675l70.974471 0 0 58.707077c0 16.957207 14.123672 30.66951 31.493272 30.66951s31.492248-13.71128 31.492248-30.66951l0-58.707077 65.35652 0c17.318434 0 31.442106-13.710256 31.442106-30.720675 0-16.906042-14.123672-30.720675-31.442106-30.720675l-65.35652 0 0-33.425274L612.039949 576.168462 612.039949 576.168462zM612.039949 576.168462',
                  },
                  {
                    name: '接单目标',
                    type: 'pictorialBar',
                    data: res.data.company.map(item => ({
                      value: item.target,
                      name: item.area,
                      extraInfo: "部门："+item.area+"<br/>接单目标: "+item.target+"万元<br />出库达成："+item.finished+"万元<br />出库达成率: "+item.finishRate
                    })),
                    barGap: '10%',
                    label: {
                      show: true,
                      position: 'right',
                      formatter: '{c} 万元',
                      textStyle: {
                        color: 'orange', // 设置标签字体颜色为红色
                        fontSize: 10,    // 设置标签字体大小
                      }
                    },
                    symbolRepeat: true,
                    symbolSize: ['80%', '60%'],
                    universalTransition: {
                      enabled: true,
                      delay: function (idx, total) {
                        return (idx / total) * 1000;
                      }
                    },
                    itemStyle: {
                      color: 'orange'
                    },
                    symbol:'path://M957.632453 577.491597c0-71.607898-97.41261-127.699404-216.773092-127.699404-7.941879 0-17.496489 0.284479-25.198915 0.769526L715.660446 241.61692c1.110287-5.29254 0.694825-10.66899 0.694825-16.159028 0-70.563102-90.568738-125.836987-209.928197-125.836987-119.364575 0-212.851782 55.277978-212.851782 125.836987 0 5.490038 0.7552 10.866489 1.861394 16.159028l0 57.293891c-6.736425-0.363274-13.563924-0.590448-20.499893-0.590448-119.359458 0-211.113185 55.269791-211.113185 125.823684 0 5.507434-0.983397 10.879792 0.127913 16.173354l0 292.651246 1.451048 0c3.745301 66.703191 94.29255 118.410853 209.534224 118.410853 115.1506 0 211.475436-51.619658 215.356836-118.410853l1.446955 0 0-12.190647c6.814196 0.397043 7.671727 1.031493 14.686491 1.031493 7.963369 0 15.743566-0.336668 23.440875-0.839111l0 3.444449 1.552356 0-0.450255 7.972579c0 68.788689 93.562932 128.696104 213.005278 128.696104 119.455649 0 213.014488-54.692646 213.014488-124.653021l-0.231267-7.936763 1.337461 0L958.096011 593.895195C959.228811 588.519768 957.632453 583.078849 957.632453 577.491597L957.632453 577.491597zM743.976352 490.38982c105.010659 0 178.182168 45.902446 178.182168 87.101777 0 41.191144-73.176626 87.098707-178.182168 87.098707-105.001449 0-178.182168-45.906539-178.182168-87.098707C565.798277 536.292266 638.974903 490.38982 743.976352 490.38982L743.976352 490.38982zM924.05573 648.885624l0 22.032806c-10.038634 44.115754-89.851401 80.996732-180.083471 80.996732-90.162486 0-169.96502-36.854373-180.071192-80.926124l0-22.103414c38.371936 34.184567 104.040564 56.30026 180.071192 56.30026C820.021306 705.186907 885.683794 683.071214 924.05573 648.885624L924.05573 648.885624zM506.428098 471.223295c-6.927783 0-7.928576-0.301875-14.686491-0.734734l0-30.17116c0.685615-3.273557 1.153266-6.587022 1.476631-9.93528 6.250354 0.375553 6.756891 0.602727 13.208836 0.602727 75.624375 0 137.65208-22.321378 174.534082-56.515155l0 16.950044C671.061692 434.866249 595.322707 471.223295 506.428098 471.223295L506.428098 471.223295zM683.876556 454.325439c-3.081175 0.494257-6.188956 0.935302-9.208732 1.499144 3.121084-2.461051 6.402827-4.847401 9.208732-7.447623L683.876556 454.325439 683.876556 454.325439zM506.428098 139.632177c103.467513 0 172.654268 45.230134 172.654268 85.825714 0 40.587394-69.186755 85.817528-172.658362 85.817528-103.470583 0-175.572738-45.230134-175.572738-85.817528C330.851267 184.862311 402.953422 139.632177 506.428098 139.632177L506.428098 139.632177zM328.97964 295.80303c3.212158 2.868327 6.883781 5.520737 10.480702 8.203846-3.421936-0.629333-6.984065-1.070378-10.480702-1.595334L328.97964 295.80303 328.97964 295.80303zM274.938839 338.318332c103.471606 0 178.48916 45.243437 178.48916 85.825714 0 40.60172-75.017554 85.818551-178.48916 85.818551-103.470583 0-175.572738-45.216831-175.572738-85.818551C99.365078 383.561769 171.467233 338.318332 274.938839 338.318332L274.938839 338.318332zM97.489358 494.502487c37.821397 33.682124 102.518908 55.474452 177.448458 55.474452 74.925457 0 142.543484-21.792329 180.350554-55.474452l0 21.710464c-9.887184 43.462884-91.451852 79.80765-180.350554 79.80765-88.854701 0-167.486572-36.322254-177.448458-79.751369L97.489358 494.502487 97.489358 494.502487zM97.489358 573.20906c36.876885 34.158984 101.811804 56.476269 177.448458 56.476269 75.624375 0 143.482879-22.317285 180.350554-56.515155l0 16.937764c-9.887184 43.463907-91.451852 79.80765-180.350554 79.80765-88.854701 0-167.486572-36.303834-177.448458-79.733972L97.489358 573.20906 97.489358 573.20906zM97.489358 647.111211c36.876885 34.162054 101.811804 56.476269 177.448458 56.476269 75.624375 0 143.482879-22.314215 180.350554-56.515155l0 16.937764c-9.887184 43.468001-91.451852 79.80765-180.350554 79.80765-88.854701 0-167.486572-36.300764-177.448458-79.747275L97.489358 647.111211 97.489358 647.111211zM274.938839 817.71068c-92.233658 0-173.256996-39.145555-178.081884-84.742033l0.633427 0 0-11.963473c36.876885 34.145681 101.811804 56.467059 177.448458 56.467059 75.624375 0 143.482879-22.321378 180.350554-56.501852l0 11.998265 0.621147 0C451.088722 778.566148 367.164311 817.71068 274.938839 817.71068L274.938839 817.71068zM488.47726 396.406309c-7.023974-19.10922-26.967188-36.43891-46.584991-51.04763 20.324908 3.707438 41.877783 5.913687 64.535829 5.913687 74.92955 0 136.712685-21.788236 174.534082-55.470359l0 21.710464c-9.896394 43.462884-85.639472 79.80765-174.534082 79.80765C498.390028 397.321144 496.288157 396.966057 488.47726 396.406309L488.47726 396.406309zM529.868973 687.174672c-7.709589 0.572028-15.512299 0.970094-23.440875 0.970094-6.927783 0-7.928576-0.288572-14.686491-0.733711l0-35.452443c6.739495 0.432859 7.726985 0.721431 14.686491 0.721431 7.985882 0 15.752776-0.398066 23.440875-0.961908L529.868973 687.174672 529.868973 687.174672zM529.868973 618.023732c-7.709589 0.582261-15.512299 0.988514-23.440875 0.988514-6.927783 0-7.928576-0.301875-14.686491-0.730641l0-40.229237c6.739495 0.432859 7.726985 0.730641 14.686491 0.730641 7.399527 0 14.603603-0.349971 21.727861-0.826831 0.188288 4.690836 0.773619 9.29776 1.713015 13.829983L529.868973 618.023732 529.868973 618.023732 529.868973 618.023732zM534.883173 543.801287c-9.323343 0.835018-18.808368 1.315972-28.455075 1.315972-6.927783 0-7.928576-0.288572-14.686491-0.734734l0-40.21184c6.739495 0.419556 7.726985 0.717338 14.686491 0.717338 22.833031 0 44.522006-2.255367 64.942081-6.0416C554.481534 511.964184 541.972639 527.166421 534.883173 543.801287L534.883173 543.801287zM743.976352 826.912249c-95.962585 0-180.220594-41.724287-181.172269-89.49836l0.300852-8.92016 0.50756 0c37.361933 34.817993 103.406115 57.589626 180.363857 57.589626 76.927043 0 142.953829-22.762423 180.329065-57.589626l0.573051 0 0.279363 8.094352C925.157831 784.701892 840.498686 826.912249 743.976352 826.912249L743.976352 826.912249zM258.071683 450.357058c-1.560542-1.87572-2.7793-5.555529-3.654226-11.036357l-25.298176 0c-0.192382 12.04943 5.053086 20.581758 15.735379 25.582655 6.057973 2.785439 15.245216 4.65502 27.553543 5.612834l0 12.989849 9.086959 0 0-13.120832c9.685593-0.515746 18.051121-2.303462 25.105794-5.346775 11.561313-4.955872 17.34811-12.920264 17.34811-23.886013 0-8.309246-4.200672-14.751982-12.602016-19.314904-5.096065-2.735297-15.048741-5.892197-29.851888-9.467629l0-24.862247c6.175653 0.306992 10.428513 2.001587 12.775978 5.097088 1.354857 1.787716 2.286066 4.606925 2.77009 8.479115l24.65554 0c-0.375553-10.432607-5.821589-17.990746-16.325827-22.644743-5.77861-2.916423-13.746072-4.65502-23.876804-5.218862l0-8.81169-9.083889 0 0 8.680706c-6.372128 0.348947-11.228739 0.887206-14.523785 1.633197-5.446036 1.175779-10.376325 3.313465-14.805194 6.390547-3.435239 2.399653-6.109138 5.241374-8.016581 8.549723-1.905396 3.313465-2.858094 6.984065-2.858094 11.028171 0 6.136767 2.446725 11.381212 7.347339 15.734356 4.904707 4.340865 13.33061 7.736195 25.263383 10.17985l7.591909 1.564635 0 27.860535C265.287015 455.16455 260.510222 453.272457 258.071683 450.357058L258.071683 450.357058zM281.495162 430.324816c5.187139 1.345648 8.867972 2.648316 11.027148 3.906983 3.64604 2.180666 5.463432 5.135974 5.463432 8.878205 0 4.916986-1.937119 8.369621-5.840008 10.376325-2.215458 1.127683-5.773494 1.914606-10.651594 2.347464L281.494139 430.324816 281.495162 430.324816zM262.280542 407.282007c-3.929496-2.13257-5.901407-5.021364-5.901407-8.680706 0-3.348258 1.315972-5.987365 3.942799-7.928576 2.613524-1.930979 6.647397-2.936889 12.089339-3.03308l0 22.907733C267.844258 409.549653 264.466324 408.457786 262.280542 407.282007L262.280542 407.282007zM724.320687 596.85562c-1.569752-1.870604-2.785439-5.538133-3.663436-11.018961l-25.298176 0c-0.183172 12.05557 5.056156 20.578688 15.734356 25.583678 6.062066 2.7793 15.250332 4.649903 27.558659 5.615904l0 12.973476 9.091052 0 0-13.108552c9.6815-0.524956 18.052145-2.315742 25.110911-5.349845 11.556197-4.966105 17.3389-12.929474 17.3389-23.89113 0-8.312316-4.204765-14.738679-12.602016-19.310811-5.097088-2.749624-15.044648-5.900384-29.848819-9.462512l0-24.865317c6.167466 0.300852 10.420327 2.006703 12.771885 5.091972 1.364067 1.782599 2.281973 4.611018 2.780323 8.484232l24.642237 0c-0.37146-10.441816-5.813403-17.986653-16.316617-22.63758-5.786797-2.914376-13.741979-4.668323-23.877827-5.232165l0-8.807596-9.091052 0 0 8.671497c-6.368034 0.36225-11.210319 0.905626-14.523785 1.635243-5.442966 1.175779-10.372232 3.308349-14.805194 6.40385-3.435239 2.38635-6.101975 5.244444-8.011464 8.540514-1.901303 3.313465-2.854001 6.993275-2.854001 11.036357 0 6.123464 2.448772 11.373025 7.355525 15.722076 4.89959 4.353145 13.31833 7.748475 25.251104 10.178827l7.587815 1.574868 0 27.859511C731.527832 601.672322 726.755132 599.769996 724.320687 596.85562L724.320687 596.85562zM747.744165 576.828494c5.184069 1.354857 8.859785 2.653433 11.024078 3.906983 3.64604 2.185782 5.459339 5.148253 5.459339 8.890484 0 4.904707-1.937119 8.370645-5.826705 10.372232-2.229784 1.12666-5.782703 1.910513-10.656711 2.342348L747.744165 576.828494 747.744165 576.828494 747.744165 576.828494zM728.529545 553.784662c-3.937682-2.12029-5.895267-5.009084-5.895267-8.667404 0-3.348258 1.302669-5.997598 3.928472-7.928576 2.631944-1.941212 6.64842-2.950192 12.090363-3.03308l0 22.89443C734.089168 556.057425 730.71942 554.965557 728.529545 553.784662L728.529545 553.784662zM488.080218 253.667374c-1.565658-1.870604-2.785439-5.555529-3.659343-11.031241l-25.298176 0c-0.188288 12.054547 5.065366 20.581758 15.747659 25.577538 6.048763 2.788509 15.231913 4.659113 27.545356 5.616928l0 12.985756 9.086959 0 0-13.121855c9.682523-0.523933 18.052145-2.298346 25.106818-5.344728 11.556197-4.965082 17.3389-12.916171 17.3389-23.890107 0-8.300037-4.195555-14.742772-12.596899-19.314904-5.097088-2.732228-15.044648-5.89629-29.848819-9.458419l0-24.866341c6.167466 0.314155 10.437723 2.001587 12.775978 5.097088 1.364067 1.774413 2.276856 4.611018 2.780323 8.484232l24.638143 0c-0.375553-10.446933-5.813403-17.994839-16.316617-22.646789-5.786797-2.914376-13.741979-4.65502-23.877827-5.213745l0-8.820899-9.086959 0 0 8.6848c-6.372128 0.345877-11.215436 0.887206-14.527878 1.635243-5.428639 1.171686-10.368138 3.291976-14.804171 6.385431-3.435239 2.391467-6.101975 5.250584-8.011464 8.55484-1.905396 3.300162-2.859118 6.984065-2.859118 11.023054 0 6.141884 2.452865 11.382235 7.356548 15.72617 4.89959 4.349051 13.317307 7.749498 25.254174 10.17985l7.591909 1.572822 0 27.859511C495.287363 258.46668 490.51057 256.579703 488.080218 253.667374L488.080218 253.667374zM511.49858 233.627968c5.184069 1.354857 8.863878 2.661619 11.028171 3.920286 3.64604 2.167363 5.463432 5.135974 5.463432 8.876158 0 4.91801-1.941212 8.370645-5.826705 10.377348-2.234901 1.12359-5.786797 1.905396-10.660804 2.346441L511.49858 233.627968 511.49858 233.627968 511.49858 233.627968zM492.288053 210.597439c-3.937682-2.136663-5.895267-5.02648-5.895267-8.680706 0-3.348258 1.306762-6.000668 3.933589-7.933693 2.626827-1.927909 6.64842-2.946099 12.090363-3.03308l0 22.912849C497.848699 212.851782 494.477928 211.777311 492.288053 210.597439L492.288053 210.597439zM492.288053 210.597439',
                  }
                ]
              };
              chart.setOption(option);
            }else if(this.parentData=="销售部"){
              const dptc1 = echarts.init(this.$refs.dptc1);
              const dptc2 = echarts.init(this.$refs.dptc2);
              const dptc3 = echarts.init(this.$refs.dptc3);
              const dptc4 = echarts.init(this.$refs.dptc4);
              let labels1 = [];
              let labels2 = [];
              let labels3 = [];
              let labels4 = [];
              let data1 = [];
              let data2 = [];
              let data3 = [];
              let data4 = [];
              // if(res.data.length>0){
                if(res.data.agent.length>0){
                  for(let i=0;i<res.data.agent.length;i++){
                    labels3.push(res.data.agent[i].area);
                    data3.push(res.data.agent[i]);
                  }
                }
                if(res.data.area.length>0){
                  for(let i=0;i<res.data.area.length;i++){
                    if(i<=4){
                      labels2.push(res.data.area[i].area);
                      data2.push(res.data.area[i]);
                    }else{
                      labels1.push(res.data.area[i].area);
                      data1.push(res.data.area[i]);
                    }
                  }
                }
                if(res.data.dptmonth.length>0){
                  for(let i=0;i<res.data.dptmonth.length;i++){
                    labels4.push(res.data.dptmonth[i].area);
                    data4.push(res.data.dptmonth[i]);
                  }
                }
                let option1 = {
                  tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                      type: 'shadow'
                    },
                    formatter: function (params) {
                      return params[0].data.extraInfo
                    }
                  },
                  legend: {
                    data: ['保底目标','冲刺目标','接单达成', '出库达成'],
                    textStyle: {
                      color: 'aqua'   // 图例文字颜色
                    }
                  },
                  grid: {
                    top: '3%',
                    left: '3%',
                    right: '4%',
                    bottom: '8%',
                    containLabel: true,
                    height: '90%',
                  },
                  xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01],
                    axisLabel: {
                      textStyle: {
                        color: 'aqua', // 设置 X 轴标签字体颜色为红色
                        fontSize: 12,    // 设置 X 轴标签字体大小
                      }
                    },
                    splitLine: {
                      show: true, // 显示网格线
                      lineStyle: {
                        color: 'aqua', // 设置网格线颜色
                        type: 'solid' // 设置网格线为虚线
                      },
                    },
                  },
                  yAxis: {
                    type: 'category',
                    data: labels1,
                    axisLabel: {
                      textStyle: {
                        color: 'aqua', // 设置 X 轴标签字体颜色为红色
                        fontSize: 12,    // 设置 X 轴标签字体大小
                      }
                    },
                  },
                  series: [
                    {
                      name: '保底目标',
                      type: 'bar',
                      barWidth: 7,
                      data: data1.map(item => ({
                        value: item.target,
                        name: item.area,
                        extraInfo: "片区："+item.area+"<br/><span style='color:orange'>保底目标: "+item.target+"万元</span><br /><span style='color:red'>冲刺目标: "+item.cctarget+"万元</span><br /><span style='color:green'>接单达成: "+item.htfinished+"万元</span><br /><span style='color:orange'>保底达成率: "+item.htrate+"%</span><br /><span style='color:red'>冲刺达成率: "+item.ccrate+"%</span><br /><span style='color:#1890FF'>出库达成："+item.finished+"万元</span>"
                      })),
                      itemStyle: {
                        color: 'orange', // 设置柱子的填充颜色为红色
                      },
                      label: {
                        show: true,
                        position: 'right',
                        formatter: '{c} 万元',
                        textStyle: {
                          color: 'aqua', // 设置标签字体颜色为红色
                          fontSize: 8,    // 设置标签字体大小
                        }
                      },
                    },
                    {
                      name: '冲刺目标',
                      type: 'bar',
                      barWidth: 7,
                      data: data1.map(item => ({
                        value: item.cctarget,
                        name: item.area,
                        extraInfo: "片区："+item.area+"<br/><span style='color:orange'>保底目标: "+item.target+"万元</span><br /><span style='color:red'>冲刺目标: "+item.cctarget+"万元</span><br /><span style='color:green'>接单达成: "+item.htfinished+"万元</span><br /><span style='color:orange'>保底达成率: "+item.htrate+"%</span><br /><span style='color:red'>冲刺达成率: "+item.ccrate+"%</span><br /><span style='color:#1890FF'>出库达成："+item.finished+"万元</span>"
                      })),
                      itemStyle: {
                        color: 'red', // 设置柱子的填充颜色为红色
                      },
                      label: {
                        show: true,
                        position: 'right',
                        formatter: '{c} 万元',
                        textStyle: {
                          color: 'aqua', // 设置标签字体颜色为红色
                          fontSize: 8,    // 设置标签字体大小
                        }
                      },
                    },
                    {
                      name: '接单达成',
                      type: 'bar',
                      barWidth: 7,
                      data: data1.map(item => ({
                        value: item.htfinished,
                        name: item.area,
                        extraInfo: "片区："+item.area+"<br/><span style='color:orange'>保底目标: "+item.target+"万元</span><br /><span style='color:red'>冲刺目标: "+item.cctarget+"万元</span><br /><span style='color:green'>接单达成: "+item.htfinished+"万元</span><br /><span style='color:orange'>保底达成率: "+item.htrate+"%</span><br /><span style='color:red'>冲刺达成率: "+item.ccrate+"%</span><br /><span style='color:#1890FF'>出库达成："+item.finished+"万元</span>"
                      })),
                      itemStyle: {
                        color: 'lightgreen', // 设置柱子的填充颜色为红色
                      },
                      label: {
                        show: true,
                        position: 'right',
                        formatter: '{c} 万元',
                        textStyle: {
                          color: 'aqua', // 设置标签字体颜色为红色
                          fontSize: 8,    // 设置标签字体大小
                        }
                      },
                    },
                    {
                      name: '出库达成',
                      type: 'bar',
                      barWidth: 7,
                      data: data1.map(item => ({
                        value: item.finished,
                        name: item.area,
                        extraInfo: "片区："+item.area+"<br/><span style='color:orange'>保底目标: "+item.target+"万元</span><br /><span style='color:red'>冲刺目标: "+item.cctarget+"万元</span><br /><span style='color:green'>接单达成: "+item.htfinished+"万元</span><br /><span style='color:orange'>保底达成率: "+item.htrate+"%</span><br /><span style='color:red'>冲刺达成率: "+item.ccrate+"%</span><br /><span style='color:#1890FF'>出库达成："+item.finished+"万元</span>"
                      })),
                      itemStyle: {
                        color: '#1890FF', // 设置柱子的填充颜色为红色
                      },
                      label: {
                        show: true,
                        position: 'right',
                        formatter: '{c} 万元',
                        textStyle: {
                          color: 'aqua', // 设置标签字体颜色为红色
                          fontSize: 8,    // 设置标签字体大小
                        }
                      },
                    }
                  ]
                };
                dptc1.setOption(option1);

                let option2 = {
                  tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                      type: 'shadow'
                    },
                    formatter: function (params) {
                      return params[0].data.extraInfo
                    }
                  },
                  legend: {
                    orient: 'vertical',
                    right: 5,
                    top: 'top',
                    data: ['保底目标','冲刺目标','接单达成', '出库达成'],
                    textStyle: {
                      color: 'aqua'   // 图例文字颜色
                    }
                  },
                  grid: {
                    top: '3%',
                    left: '3%',
                    right: '4%',
                    bottom: '8%',
                    containLabel: true,
                    height: '90%',
                  },
                  xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01],
                    axisLabel: {
                      textStyle: {
                        color: 'aqua', // 设置 X 轴标签字体颜色为红色
                        fontSize: 12,    // 设置 X 轴标签字体大小
                      }
                    },
                    splitLine: {
                      show: true, // 显示网格线
                      lineStyle: {
                        color: 'aqua', // 设置网格线颜色
                        type: 'solid' // 设置网格线为虚线
                      },
                    },
                  },
                  yAxis: {
                    type: 'category',
                    data: labels2,
                    axisLabel: {
                      textStyle: {
                        color: 'aqua', // 设置 X 轴标签字体颜色为红色
                        fontSize: 12,    // 设置 X 轴标签字体大小
                      }
                    },
                  },
                  series: [
                    {
                      name: '保底目标',
                      type: 'bar',
                      barWidth: 7,
                      data: data2.map(item => ({
                        value: item.target,
                        name: item.area,
                        extraInfo: "片区："+item.area+"<br/><span style='color:orange'>保底目标: "+item.target+"万元</span><br /><span style='color:red'>冲刺目标: "+item.cctarget+"万元</span><br /><span style='color:green'>接单达成: "+item.htfinished+"万元</span><br /><span style='color:orange'>保底达成率: "+item.htrate+"%</span><br /><span style='color:red'>冲刺达成率: "+item.ccrate+"%</span><br /><span style='color:#1890FF'>出库达成："+item.finished+"万元</span>"
                      })),
                      itemStyle: {
                        color: 'orange', // 设置柱子的填充颜色为红色
                      },
                      label: {
                        show: true,
                        position: 'right',
                        formatter: '{c} 万元',
                        textStyle: {
                          color: 'aqua', // 设置标签字体颜色为红色
                          fontSize: 8,    // 设置标签字体大小
                        }
                      },
                    },
                    {
                      name: '冲刺目标',
                      type: 'bar',
                      barWidth: 7,
                      data: data2.map(item => ({
                        value: item.cctarget,
                        name: item.area,
                        extraInfo: "片区："+item.area+"<br/><span style='color:orange'>保底目标: "+item.target+"万元</span><br /><span style='color:red'>冲刺目标: "+item.cctarget+"万元</span><br /><span style='color:green'>接单达成: "+item.htfinished+"万元</span><br /><span style='color:orange'>保底达成率: "+item.htrate+"%</span><br /><span style='color:red'>冲刺达成率: "+item.ccrate+"%</span><br /><span style='color:#1890FF'>出库达成："+item.finished+"万元</span>"
                      })),
                      itemStyle: {
                        color: 'red', // 设置柱子的填充颜色为红色
                      },
                      label: {
                        show: true,
                        position: 'right',
                        formatter: '{c} 万元',
                        textStyle: {
                          color: 'aqua', // 设置标签字体颜色为红色
                          fontSize: 8,    // 设置标签字体大小
                        }
                      },
                    },
                    {
                      name: '接单达成',
                      type: 'bar',
                      barWidth: 7,
                      data: data2.map(item => ({
                        value: item.htfinished,
                        name: item.area,
                        extraInfo: "片区："+item.area+"<br/><span style='color:orange'>保底目标: "+item.target+"万元</span><br /><span style='color:red'>冲刺目标: "+item.cctarget+"万元</span><br /><span style='color:green'>接单达成: "+item.htfinished+"万元</span><br /><span style='color:orange'>保底达成率: "+item.htrate+"%</span><br /><span style='color:red'>冲刺达成率: "+item.ccrate+"%</span><br /><span style='color:#1890FF'>出库达成："+item.finished+"万元</span>"
                      })),
                      itemStyle: {
                        color: 'lightgreen', // 设置柱子的填充颜色为红色
                      },
                      label: {
                        show: true,
                        position: 'right',
                        formatter: '{c} 万元',
                        textStyle: {
                          color: 'aqua', // 设置标签字体颜色为红色
                          fontSize: 8,    // 设置标签字体大小
                        }
                      },
                    },
                    {
                      name: '出库达成',
                      type: 'bar',
                      barWidth: 7,
                      data: data2.map(item => ({
                        value: item.finished,
                        name: item.area,
                        extraInfo: "片区："+item.area+"<br/><span style='color:orange'>保底目标: "+item.target+"万元</span><br /><span style='color:red'>冲刺目标: "+item.cctarget+"万元</span><br /><span style='color:green'>接单达成: "+item.htfinished+"万元</span><br /><span style='color:orange'>保底达成率: "+item.htrate+"%</span><br /><span style='color:red'>冲刺达成率: "+item.ccrate+"%</span><br /><span style='color:#1890FF'>出库达成："+item.finished+"万元</span>"
                      })),
                      itemStyle: {
                        color: '#1890FF', // 设置柱子的填充颜色为红色
                      },
                      label: {
                        show: true,
                        position: 'right',
                        formatter: '{c} 万元',
                        textStyle: {
                          color: 'aqua', // 设置标签字体颜色为红色
                          fontSize: 8,    // 设置标签字体大小
                        }
                      },
                    }
                  ]
                };
                dptc2.setOption(option2);

                let option3 = {
                  tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                      type: 'shadow'
                    },
                    formatter: function (params) {
                      return params[0].data.extraInfo
                    }
                  },
                  legend: {
                    data: ['保底目标','冲刺目标','接单达成', '出库达成'],
                    textStyle: {
                      color: 'aqua'   // 图例文字颜色
                    }
                  },
                  grid: {
                    top: '3%',
                    left: '3%',
                    right: '4%',
                    bottom: '8%',
                    containLabel: true,
                    height: '90%',
                  },
                  xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01],
                    axisLabel: {
                      textStyle: {
                        color: 'aqua', // 设置 X 轴标签字体颜色为红色
                        fontSize: 12,    // 设置 X 轴标签字体大小
                      }
                    },
                    splitLine: {
                      show: true, // 显示网格线
                      lineStyle: {
                        color: 'aqua', // 设置网格线颜色
                        type: 'solid' // 设置网格线为虚线
                      },
                    },
                  },
                  yAxis: {
                    type: 'category',
                    data: labels3,
                    axisLabel: {
                      textStyle: {
                        color: 'aqua', // 设置 X 轴标签字体颜色为红色
                        fontSize: 12,    // 设置 X 轴标签字体大小
                      }
                    },
                  },
                  series: [
                    {
                      name: '保底目标',
                      type: 'bar',
                      barWidth: 15,
                      data: data3.map(item => ({
                        value: item.target,
                        name: item.area,
                        extraInfo: "代理商："+item.area+"<br/><span style='color:orange'>保底目标: "+item.target+"万元</span><br /><span style='color:red'>冲刺目标: "+item.cctarget+"万元</span><br /><span style='color:green'>接单达成: "+item.htfinished+"万元</span><br /><span style='color:orange'>保底达成率: "+item.htrate+"%</span><br /><span style='color:red'>冲刺达成率: "+item.ccrate+"%</span><br /><span style='color:#1890FF'>出库达成："+item.finished+"万元</span>"
                      })),
                      itemStyle: {
                        color: 'orange', // 设置柱子的填充颜色为红色
                      },
                      label: {
                        show: true,
                        position: 'right',
                        formatter: '{c} 万元',
                        textStyle: {
                          color: 'aqua', // 设置标签字体颜色为红色
                          fontSize: 8,    // 设置标签字体大小
                        }
                      },
                    },
                    {
                      name: '冲刺目标',
                      type: 'bar',
                      barWidth: 15,
                      data: data3.map(item => ({
                        value: item.cctarget,
                        name: item.area,
                        extraInfo: "代理商："+item.area+"<br/><span style='color:orange'>保底目标: "+item.target+"万元</span><br /><span style='color:red'>冲刺目标: "+item.cctarget+"万元</span><br /><span style='color:green'>接单达成: "+item.htfinished+"万元</span><br /><span style='color:orange'>保底达成率: "+item.htrate+"%</span><br /><span style='color:red'>冲刺达成率: "+item.ccrate+"%</span><br /><span style='color:#1890FF'>出库达成："+item.finished+"万元</span>"
                      })),
                      itemStyle: {
                        color: 'red', // 设置柱子的填充颜色为红色
                      },
                      label: {
                        show: true,
                        position: 'right',
                        formatter: '{c} 万元',
                        textStyle: {
                          color: 'aqua', // 设置标签字体颜色为红色
                          fontSize: 8,    // 设置标签字体大小
                        }
                      },
                    },
                    {
                      name: '接单达成',
                      type: 'bar',
                      barWidth: 15,
                      data: data3.map(item => ({
                        value: item.htfinished,
                        name: item.area,
                        extraInfo: "代理商："+item.area+"<br/><span style='color:orange'>保底目标: "+item.target+"万元</span><br /><span style='color:red'>冲刺目标: "+item.cctarget+"万元</span><br /><span style='color:green'>接单达成: "+item.htfinished+"万元</span><br /><span style='color:orange'>保底达成率: "+item.htrate+"%</span><br /><span style='color:red'>冲刺达成率: "+item.ccrate+"%</span><br /><span style='color:#1890FF'>出库达成："+item.finished+"万元</span>"
                      })),
                      itemStyle: {
                        color: 'lightgreen', // 设置柱子的填充颜色为红色
                      },
                      label: {
                        show: true,
                        position: 'right',
                        formatter: '{c} 万元',
                        textStyle: {
                          color: 'aqua', // 设置标签字体颜色为红色
                          fontSize: 8,    // 设置标签字体大小
                        }
                      },
                    },
                    {
                      name: '出库达成',
                      type: 'bar',
                      barWidth: 15,
                      data: data3.map(item => ({
                        value: item.finished,
                        name: item.area,
                        extraInfo: "代理商："+item.area+"<br/><span style='color:orange'>保底目标: "+item.target+"万元</span><br /><span style='color:red'>冲刺目标: "+item.cctarget+"万元</span><br /><span style='color:green'>接单达成: "+item.htfinished+"万元</span><br /><span style='color:orange'>保底达成率: "+item.htrate+"%</span><br /><span style='color:red'>冲刺达成率: "+item.ccrate+"%</span><br /><span style='color:#1890FF'>出库达成："+item.finished+"万元</span>"
                      })),
                      itemStyle: {
                        color: '#1890FF', // 设置柱子的填充颜色为红色
                      },
                      label: {
                        show: true,
                        position: 'right',
                        formatter: '{c} 万元',
                        textStyle: {
                          color: 'aqua', // 设置标签字体颜色为红色
                          fontSize: 8,    // 设置标签字体大小
                        }
                      },
                    }
                  ]
                };
                dptc3.setOption(option3);

                const option4 = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                              color: '#999'
                            }
                        },
                        formatter: function (params) {
                          return params[0].data.extraInfo
                        }
                    },
                    toolbox: {},
                    legend: {
                      data: ['保底目标','冲刺目标','接单达成', '出库达成'],
                      textStyle: {
                        color: 'aqua'   // 图例文字颜色
                      }
                    },
                    xAxis: [
                      {
                        type: 'category',
                        data: labels4,
                        axisLabel: {
                          rotate: 0, // 设置 X 轴文字旋转角度
                          interval: 0, // 强制显示所有标签
                          fontSize: 14, // 文字大小
                          color: 'aqua' // 文字颜色
                        },
                        axisLine: { show: false },
                        axisTick: { show: false },
                        // axisLabel: { show: false },
                        splitLine: { show: false }
                      }
                    ],
                    yAxis: {
                      type: 'value',
                      axisLine: { show: false },
                      axisTick: { show: false },
                      axisLabel: { show: false },
                      splitLine: { show: false }
                    },
                    series: [
                      {
                          name: '保底目标',
                          type: 'bar',
                          barWidth: 80,
                          data: data4.map(item => ({
                            value: item.target,
                            name: item.area,
                            extraInfo: "月份："+item.month+"<br/><span style='color:orange'>保底目标: "+item.target+"万元</span><br /><span style='color:red'>冲刺目标: "+item.cctarget+"万元</span><br /><span style='color:green'>接单达成: "+item.htfinished+"万元</span><br /><span style='color:orange'>保底达成率: "+item.htrate+"%</span><br /><span style='color:red'>冲刺达成率: "+item.ccrate+"%</span><br /><span style='color:#1890FF'>出库达成："+item.finished+"万元</span>"
                          })),
                          itemStyle: {
                            color: 'orange', // 设置柱子的填充颜色为红色
                          },
                          label: {
                            show: true,
                            position: 'top',
                            formatter: '{c} 万元',
                            textStyle: {
                              color: 'aqua', // 设置标签字体颜色为红色
                              fontSize: 10,    // 设置标签字体大小
                            }
                          },
                      },
                      {
                          name: '冲刺目标',
                          type: 'bar',
                          barWidth: 80,
                          data: data4.map(item => ({
                            value: item.cctarget,
                            name: item.area,
                            extraInfo: "月份："+item.month+"<br/><span style='color:orange'>保底目标: "+item.target+"万元</span><br /><span style='color:red'>冲刺目标: "+item.cctarget+"万元</span><br /><span style='color:green'>接单达成: "+item.htfinished+"万元</span><br /><span style='color:orange'>保底达成率: "+item.htrate+"%</span><br /><span style='color:red'>冲刺达成率: "+item.ccrate+"%</span><br /><span style='color:#1890FF'>出库达成："+item.finished+"万元</span>"
                          })),
                          itemStyle: {
                            color: 'red', // 设置柱子的填充颜色为红色
                          },
                          label: {
                            show: true,
                            position: 'top',
                            formatter: '{c} 万元',
                            textStyle: {
                              color: 'aqua', // 设置标签字体颜色为红色
                              fontSize: 10,    // 设置标签字体大小
                            }
                          },
                      },
                      {
                          name: '接单达成',
                          type: 'bar',
                          barWidth: 80,
                          data: data4.map(item => ({
                            value: item.htfinished,
                            name: item.area,
                            extraInfo: "月份："+item.month+"<br/><span style='color:orange'>保底目标: "+item.target+"万元</span><br /><span style='color:red'>冲刺目标: "+item.cctarget+"万元</span><br /><span style='color:green'>接单达成: "+item.htfinished+"万元</span><br /><span style='color:orange'>保底达成率: "+item.htrate+"%</span><br /><span style='color:red'>冲刺达成率: "+item.ccrate+"%</span><br /><span style='color:#1890FF'>出库达成："+item.finished+"万元</span>"
                          })),
                          itemStyle: {
                            color: 'lightgreen', // 设置柱子的填充颜色为红色
                          },
                          label: {
                            show: true,
                            position: 'top',
                            formatter: '{c} 万元',
                            textStyle: {
                              color: 'aqua', // 设置标签字体颜色为红色
                              fontSize: 10,    // 设置标签字体大小
                            }
                          },
                      },
                      {
                      name: '出库达成',
                      type: 'bar',
                      barWidth: 80,
                      data: data4.map(item => ({
                        value: item.finished,
                        name: item.area,
                        extraInfo: "月份："+item.month+"<br/><span style='color:orange'>保底目标: "+item.target+"万元</span><br /><span style='color:red'>冲刺目标: "+item.cctarget+"万元</span><br /><span style='color:green'>接单达成: "+item.htfinished+"万元</span><br /><span style='color:orange'>保底达成率: "+item.htrate+"%</span><br /><span style='color:red'>冲刺达成率: "+item.ccrate+"%</span><br /><span style='color:#1890FF'>出库达成："+item.finished+"万元</span>"
                      })),
                      itemStyle: {
                        color: '#1890FF', // 设置柱子的填充颜色为红色
                      },
                      label: {
                        show: true,
                        position: 'top',
                        formatter: '{c} 万元',
                        textStyle: {
                          color: 'aqua', // 设置标签字体颜色为红色
                          fontSize: 10,    // 设置标签字体大小
                        }
                      },
                    }
                    ]
                };
                dptc4.setOption(option4);
              // }
            }else{
              const month = new Date().getMonth(); // 获取当前月份（0-11）
              if (month >= 0 && month <= 2) {
                this.areaActiveName = "first";
                const areac1 = echarts.init(this.$refs.areac1);
                this.$nextTick(() => {
                  areac1 && areac1.resize();
                });
              } else if (month >= 3 && month <= 5) {
                this.areaActiveName = "second";
                const areac2 = echarts.init(this.$refs.areac2);
                this.$nextTick(() => {
                  areac2 && areac2.resize();
                });
              } else if (month >= 6 && month <= 8) {
                this.areaActiveName = "third";
                const areac3 = echarts.init(this.$refs.areac3);
                this.$nextTick(() => {
                  areac3 && areac3.resize();
                });
              } else {
                this.areaActiveName = "fourth";
                const areac4 = echarts.init(this.$refs.areac4);
                this.$nextTick(() => {
                  areac4 && areac4.resize();
                });
              }
              const areac1 = echarts.init(this.$refs.areac1);
              const areac2 = echarts.init(this.$refs.areac2);
              const areac3 = echarts.init(this.$refs.areac3);
              const areac4 = echarts.init(this.$refs.areac4);
              let labels1 = [];
              let labels2 = [];
              let labels3 = [];
              let labels4 = [];
              let data1 = [];
              let data2 = [];
              let data3 = [];
              let data4 = [];
              if(res.data.area.length>0){
                if(res.data.area.length<=3){
                  for(let i=0;i<res.data.length;i++){
                    labels1.push(res.data.area[i].month+"月");
                    data1.push(res.data.area[i]);
                  }
                }else if(res.data.area.length>3&&res.data.area.length<=6){
                  for(let i=0;i<res.data.area.length;i++){
                    if(i<3){
                      labels1.push(res.data.area[i].month+"月");
                      data1.push(res.data.area[i]);
                    }else{
                      labels2.push(res.data.area[i].month+"月");
                      data2.push(res.data.area[i]);
                    }
                  }
                }else if(res.data.area.length>6&&res.data.area.length<=9){
                  for(let i=0;i<res.data.area.length;i++){
                    if(i<3){
                      labels1.push(res.data.area[i].month+"月");
                      data1.push(res.data.area[i]);
                    }else if(i>=3&&i<6){
                      labels2.push(res.data.area[i].month+"月");
                      data2.push(res.data.area[i]);
                    }else{
                      labels3.push(res.data.area[i].month+"月");
                      data3.push(res.data.area[i]);
                    }
                  }
                }else if(res.data.area.length>9&&res.data.area.length<=12){
                  for(let i=0;i<res.data.area.length;i++){
                    if(i<3){
                      labels1.push(res.data.area[i].month+"月");
                      data1.push(res.data.area[i]);
                    }else if(i>=3&&i<6){
                      labels2.push(res.data.area[i].month+"月");
                      data2.push(res.data.area[i]);
                    }else if(i>=6&&i<9){
                      labels3.push(res.data.area[i].month+"月");
                      data3.push(res.data.area[i]);
                    }else{
                      labels4.push(res.data.area[i].month+"月");
                      data4.push(res.data.area[i]);
                    }
                  }
                }
              }
              let option1 = {
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                    type: 'shadow'
                  },
                  formatter: function (params) {
                    return params[0].data.extraInfo
                  }
                },
                legend: {
                  data: ['保底目标','冲刺目标','接单达成', '出库达成'],
                  textStyle: {
                    color: 'aqua'   // 图例文字颜色
                  }
                },
                grid: {
                  top: '3%',
                  left: '3%',
                  right: '4%',
                  bottom: '8%',
                  containLabel: true,
                  height: '90%',
                },
                xAxis: {
                  type: 'value',
                  boundaryGap: [0, 0.01],
                  axisLabel: {
                    textStyle: {
                      color: 'aqua', // 设置 X 轴标签字体颜色为红色
                      fontSize: 12,    // 设置 X 轴标签字体大小
                    }
                  },
                  splitLine: {
                    show: true, // 显示网格线
                    lineStyle: {
                      color: 'aqua', // 设置网格线颜色
                      type: 'solid' // 设置网格线为虚线
                    },
                  },
                },
                yAxis: {
                  type: 'category',
                  data: labels1,
                  axisLabel: {
                    textStyle: {
                      color: 'aqua', // 设置 X 轴标签字体颜色为红色
                      fontSize: 12,    // 设置 X 轴标签字体大小
                    }
                  },
                },
                series: [
                  {
                    name: '保底目标',
                    type: 'bar',
                    barWidth: 10,
                    data: data1.map(item => ({
                      value: item.target,
                      name: item.area,
                      extraInfo: "片区："+item.area+"<br/><span style='color:orange'>保底目标: "+item.target+"万元</span><br /><span style='color:red'>冲刺目标: "+item.cctarget+"万元</span><br /><span style='color:green'>接单达成: "+item.htfinished+"万元</span><br /><span style='color:orange'>保底达成率: "+item.htrate+"%</span><br /><span style='color:red'>冲刺达成率: "+item.ccrate+"%</span><br /><span style='color:#1890FF'>出库达成："+item.finished+"万元</span>"
                    })),
                    itemStyle: {
                      color: 'orange', // 设置柱子的填充颜色为红色
                    },
                    label: {
                      show: true,
                      position: 'right',
                      formatter: '{c} 万元',
                      textStyle: {
                        color: 'aqua', // 设置标签字体颜色为红色
                        fontSize: 10,    // 设置标签字体大小
                      }
                    },
                  },
                  {
                    name: '冲刺目标',
                    type: 'bar',
                    barWidth: 10,
                    data: data1.map(item => ({
                      value: item.cctarget,
                      name: item.area,
                      extraInfo: "片区："+item.area+"<br/><span style='color:orange'>保底目标: "+item.target+"万元</span><br /><span style='color:red'>冲刺目标: "+item.cctarget+"万元</span><br /><span style='color:green'>接单达成: "+item.htfinished+"万元</span><br /><span style='color:orange'>保底达成率: "+item.htrate+"%</span><br /><span style='color:red'>冲刺达成率: "+item.ccrate+"%</span><br /><span style='color:#1890FF'>出库达成："+item.finished+"万元</span>"
                    })),
                    itemStyle: {
                      color: 'red', // 设置柱子的填充颜色为红色
                    },
                    label: {
                      show: true,
                      position: 'right',
                      formatter: '{c} 万元',
                      textStyle: {
                        color: 'aqua', // 设置标签字体颜色为红色
                        fontSize: 10,    // 设置标签字体大小
                      }
                    },
                  },
                  {
                    name: '接单达成',
                    type: 'bar',
                    barWidth: 10,
                    data: data1.map(item => ({
                      value: item.htfinished,
                      name: item.area,
                      extraInfo: "片区："+item.area+"<br/><span style='color:orange'>保底目标: "+item.target+"万元</span><br /><span style='color:red'>冲刺目标: "+item.cctarget+"万元</span><br /><span style='color:green'>接单达成: "+item.htfinished+"万元</span><br /><span style='color:orange'>保底达成率: "+item.htrate+"%</span><br /><span style='color:red'>冲刺达成率: "+item.ccrate+"%</span><br /><span style='color:#1890FF'>出库达成："+item.finished+"万元</span>"
                    })),
                    itemStyle: {
                      color: 'lightgreen', // 设置柱子的填充颜色为红色
                    },
                    label: {
                      show: true,
                      position: 'right',
                      formatter: '{c} 万元',
                      textStyle: {
                        color: 'aqua', // 设置标签字体颜色为红色
                        fontSize: 10,    // 设置标签字体大小
                      }
                    },
                  },
                  {
                    name: '出库达成',
                    type: 'bar',
                    barWidth: 10,
                    data: data1.map(item => ({
                      value: item.finished,
                      name: item.area,
                      extraInfo: "片区："+item.area+"<br/><span style='color:orange'>保底目标: "+item.target+"万元</span><br /><span style='color:red'>冲刺目标: "+item.cctarget+"万元</span><br /><span style='color:green'>接单达成: "+item.htfinished+"万元</span><br /><span style='color:orange'>保底达成率: "+item.htrate+"%</span><br /><span style='color:red'>冲刺达成率: "+item.ccrate+"%</span><br /><span style='color:#1890FF'>出库达成："+item.finished+"万元</span>"
                    })),
                    itemStyle: {
                      color: '#1890FF', // 设置柱子的填充颜色为红色
                    },
                    label: {
                      show: true,
                      position: 'right',
                      formatter: '{c} 万元',
                      textStyle: {
                        color: 'aqua', // 设置标签字体颜色为红色
                        fontSize: 10,    // 设置标签字体大小
                      }
                    },
                  }
                ]
              };
              areac1.setOption(option1);

              let option2 = {
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                    type: 'shadow'
                  },
                  formatter: function (params) {
                    return params[0].data.extraInfo
                  }
                },
                legend: {
                  data: ['保底目标','冲刺目标','接单达成', '出库达成'],
                  textStyle: {
                    color: 'aqua'   // 图例文字颜色
                  }
                },
                grid: {
                  top: '3%',
                  left: '3%',
                  right: '4%',
                  bottom: '8%',
                  containLabel: true,
                  height: '90%',
                },
                xAxis: {
                  type: 'value',
                  boundaryGap: [0, 0.01],
                  axisLabel: {
                    textStyle: {
                      color: 'aqua', // 设置 X 轴标签字体颜色为红色
                      fontSize: 12,    // 设置 X 轴标签字体大小
                    }
                  },
                  splitLine: {
                    show: true, // 显示网格线
                    lineStyle: {
                      color: 'aqua', // 设置网格线颜色
                      type: 'solid' // 设置网格线为虚线
                    },
                  },
                },
                yAxis: {
                  type: 'category',
                  data: labels2,
                  axisLabel: {
                    textStyle: {
                      color: 'aqua', // 设置 X 轴标签字体颜色为红色
                      fontSize: 12,    // 设置 X 轴标签字体大小
                    }
                  },
                },
                series: [
                  {
                    name: '保底目标',
                    type: 'bar',
                    barWidth: 10,
                    data: data2.map(item => ({
                      value: item.target,
                      name: item.area,
                      extraInfo: "片区："+item.area+"<br/><span style='color:orange'>保底目标: "+item.target+"万元</span><br /><span style='color:red'>冲刺目标: "+item.cctarget+"万元</span><br /><span style='color:green'>接单达成: "+item.htfinished+"万元</span><br /><span style='color:orange'>保底达成率: "+item.htrate+"%</span><br /><span style='color:red'>冲刺达成率: "+item.ccrate+"%</span><br /><span style='color:#1890FF'>出库达成："+item.finished+"万元</span>"
                    })),
                    itemStyle: {
                      color: 'orange', // 设置柱子的填充颜色为红色
                    },
                    label: {
                      show: true,
                      position: 'right',
                      formatter: '{c} 万元',
                      textStyle: {
                        color: 'aqua', // 设置标签字体颜色为红色
                        fontSize: 10,    // 设置标签字体大小
                      }
                    },
                  },
                  {
                    name: '冲刺目标',
                    type: 'bar',
                    barWidth: 10,
                    data: data2.map(item => ({
                      value: item.cctarget,
                      name: item.area,
                      extraInfo: "片区："+item.area+"<br/><span style='color:orange'>保底目标: "+item.target+"万元</span><br /><span style='color:red'>冲刺目标: "+item.cctarget+"万元</span><br /><span style='color:green'>接单达成: "+item.htfinished+"万元</span><br /><span style='color:orange'>保底达成率: "+item.htrate+"%</span><br /><span style='color:red'>冲刺达成率: "+item.ccrate+"%</span><br /><span style='color:#1890FF'>出库达成："+item.finished+"万元</span>"
                    })),
                    itemStyle: {
                      color: 'red', // 设置柱子的填充颜色为红色
                    },
                    label: {
                      show: true,
                      position: 'right',
                      formatter: '{c} 万元',
                      textStyle: {
                        color: 'aqua', // 设置标签字体颜色为红色
                        fontSize: 10,    // 设置标签字体大小
                      }
                    },
                  },
                  {
                    name: '接单达成',
                    type: 'bar',
                    barWidth: 10,
                    data: data2.map(item => ({
                      value: item.htfinished,
                      name: item.area,
                      extraInfo: "片区："+item.area+"<br/><span style='color:orange'>保底目标: "+item.target+"万元</span><br /><span style='color:red'>冲刺目标: "+item.cctarget+"万元</span><br /><span style='color:green'>接单达成: "+item.htfinished+"万元</span><br /><span style='color:orange'>保底达成率: "+item.htrate+"%</span><br /><span style='color:red'>冲刺达成率: "+item.ccrate+"%</span><br /><span style='color:#1890FF'>出库达成："+item.finished+"万元</span>"
                    })),
                    itemStyle: {
                      color: 'lightgreen', // 设置柱子的填充颜色为红色
                    },
                    label: {
                      show: true,
                      position: 'right',
                      formatter: '{c} 万元',
                      textStyle: {
                        color: 'aqua', // 设置标签字体颜色为红色
                        fontSize: 10,    // 设置标签字体大小
                      }
                    },
                  },
                  {
                    name: '出库达成',
                    type: 'bar',
                    barWidth: 10,
                    data: data2.map(item => ({
                      value: item.finished,
                      name: item.area,
                      extraInfo: "片区："+item.area+"<br/><span style='color:orange'>保底目标: "+item.target+"万元</span><br /><span style='color:red'>冲刺目标: "+item.cctarget+"万元</span><br /><span style='color:green'>接单达成: "+item.htfinished+"万元</span><br /><span style='color:orange'>保底达成率: "+item.htrate+"%</span><br /><span style='color:red'>冲刺达成率: "+item.ccrate+"%</span><br /><span style='color:#1890FF'>出库达成："+item.finished+"万元</span>"
                    })),
                    itemStyle: {
                      color: '#1890FF', // 设置柱子的填充颜色为红色
                    },
                    label: {
                      show: true,
                      position: 'right',
                      formatter: '{c} 万元',
                      textStyle: {
                        color: 'aqua', // 设置标签字体颜色为红色
                        fontSize: 10,    // 设置标签字体大小
                      }
                    },
                  }
                ]
              };
              areac2.setOption(option2);

              let option3 = {
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                    type: 'shadow'
                  },
                  formatter: function (params) {
                    return params[0].data.extraInfo
                  }
                },
                legend: {
                  data: ['保底目标','冲刺目标','接单达成', '出库达成'],
                  textStyle: {
                    color: 'aqua'   // 图例文字颜色
                  }
                },
                grid: {
                  top: '3%',
                  left: '3%',
                  right: '4%',
                  bottom: '8%',
                  containLabel: true,
                  height: '90%',
                },
                xAxis: {
                  type: 'value',
                  boundaryGap: [0, 0.01],
                  axisLabel: {
                    textStyle: {
                      color: 'aqua', // 设置 X 轴标签字体颜色为红色
                      fontSize: 12,    // 设置 X 轴标签字体大小
                    }
                  },
                  splitLine: {
                    show: true, // 显示网格线
                    lineStyle: {
                      color: 'aqua', // 设置网格线颜色
                      type: 'solid' // 设置网格线为虚线
                    },
                  },
                },
                yAxis: {
                  type: 'category',
                  data: labels3,
                  axisLabel: {
                    textStyle: {
                      color: 'aqua', // 设置 X 轴标签字体颜色为红色
                      fontSize: 12,    // 设置 X 轴标签字体大小
                    }
                  },
                },
                series: [
                  {
                    name: '保底目标',
                    type: 'bar',
                    barWidth: 10,
                    data: data3.map(item => ({
                      value: item.target,
                      name: item.area,
                      extraInfo: "片区："+item.area+"<br/><span style='color:orange'>保底目标: "+item.target+"万元</span><br /><span style='color:red'>冲刺目标: "+item.cctarget+"万元</span><br /><span style='color:green'>接单达成: "+item.htfinished+"万元</span><br /><span style='color:orange'>保底达成率: "+item.htrate+"%</span><br /><span style='color:red'>冲刺达成率: "+item.ccrate+"%</span><br /><span style='color:#1890FF'>出库达成："+item.finished+"万元</span>"
                    })),
                    itemStyle: {
                      color: 'orange', // 设置柱子的填充颜色为红色
                    },
                    label: {
                      show: true,
                      position: 'right',
                      formatter: '{c} 万元',
                      textStyle: {
                        color: 'aqua', // 设置标签字体颜色为红色
                        fontSize: 10,    // 设置标签字体大小
                      }
                    },
                  },
                  {
                    name: '冲刺目标',
                    type: 'bar',
                    barWidth: 10,
                    data: data3.map(item => ({
                      value: item.cctarget,
                      name: item.area,
                      extraInfo: "片区："+item.area+"<br/><span style='color:orange'>保底目标: "+item.target+"万元</span><br /><span style='color:red'>冲刺目标: "+item.cctarget+"万元</span><br /><span style='color:green'>接单达成: "+item.htfinished+"万元</span><br /><span style='color:orange'>保底达成率: "+item.htrate+"%</span><br /><span style='color:red'>冲刺达成率: "+item.ccrate+"%</span><br /><span style='color:#1890FF'>出库达成："+item.finished+"万元</span>"
                    })),
                    itemStyle: {
                      color: 'red', // 设置柱子的填充颜色为红色
                    },
                    label: {
                      show: true,
                      position: 'right',
                      formatter: '{c} 万元',
                      textStyle: {
                        color: 'aqua', // 设置标签字体颜色为红色
                        fontSize: 10,    // 设置标签字体大小
                      }
                    },
                  },
                  {
                    name: '接单达成',
                    type: 'bar',
                    barWidth: 10,
                    data: data3.map(item => ({
                      value: item.htfinished,
                      name: item.area,
                      extraInfo: "片区："+item.area+"<br/><span style='color:orange'>保底目标: "+item.target+"万元</span><br /><span style='color:red'>冲刺目标: "+item.cctarget+"万元</span><br /><span style='color:green'>接单达成: "+item.htfinished+"万元</span><br /><span style='color:orange'>保底达成率: "+item.htrate+"%</span><br /><span style='color:red'>冲刺达成率: "+item.ccrate+"%</span><br /><span style='color:#1890FF'>出库达成："+item.finished+"万元</span>"
                    })),
                    itemStyle: {
                      color: 'lightgreen', // 设置柱子的填充颜色为红色
                    },
                    label: {
                      show: true,
                      position: 'right',
                      formatter: '{c} 万元',
                      textStyle: {
                        color: 'aqua', // 设置标签字体颜色为红色
                        fontSize: 10,    // 设置标签字体大小
                      }
                    },
                  },
                  {
                    name: '出库达成',
                    type: 'bar',
                    barWidth: 10,
                    data: data3.map(item => ({
                      value: item.finished,
                      name: item.area,
                      extraInfo: "片区："+item.area+"<br/><span style='color:orange'>保底目标: "+item.target+"万元</span><br /><span style='color:red'>冲刺目标: "+item.cctarget+"万元</span><br /><span style='color:green'>接单达成: "+item.htfinished+"万元</span><br /><span style='color:orange'>保底达成率: "+item.htrate+"%</span><br /><span style='color:red'>冲刺达成率: "+item.ccrate+"%</span><br /><span style='color:#1890FF'>出库达成："+item.finished+"万元</span>"
                    })),
                    itemStyle: {
                      color: '#1890FF', // 设置柱子的填充颜色为红色
                    },
                    label: {
                      show: true,
                      position: 'right',
                      formatter: '{c} 万元',
                      textStyle: {
                        color: 'aqua', // 设置标签字体颜色为红色
                        fontSize: 10,    // 设置标签字体大小
                      }
                    },
                  }
                ]
              };
              areac3.setOption(option3);

              let option4 = {
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                    type: 'shadow'
                  },
                  formatter: function (params) {
                    return params[0].data.extraInfo
                  }
                },
                legend: {
                  data: ['保底目标','冲刺目标','接单达成', '出库达成'],
                  textStyle: {
                    color: 'aqua'   // 图例文字颜色
                  }
                },
                grid: {
                  top: '3%',
                  left: '3%',
                  right: '4%',
                  bottom: '8%',
                  containLabel: true,
                  height: '90%',
                },
                xAxis: {
                  type: 'value',
                  boundaryGap: [0, 0.01],
                  axisLabel: {
                    textStyle: {
                      color: 'aqua', // 设置 X 轴标签字体颜色为红色
                      fontSize: 12,    // 设置 X 轴标签字体大小
                    }
                  },
                  splitLine: {
                    show: true, // 显示网格线
                    lineStyle: {
                      color: 'aqua', // 设置网格线颜色
                      type: 'solid' // 设置网格线为虚线
                    },
                  },
                },
                yAxis: {
                  type: 'category',
                  data: labels4,
                  axisLabel: {
                    textStyle: {
                      color: 'aqua', // 设置 X 轴标签字体颜色为红色
                      fontSize: 12,    // 设置 X 轴标签字体大小
                    }
                  },
                },
                series: [
                  {
                    name: '保底目标',
                    type: 'bar',
                    barWidth: 10,
                    data: data4.map(item => ({
                      value: item.target,
                      name: item.area,
                      extraInfo: "片区："+item.area+"<br/><span style='color:orange'>保底目标: "+item.target+"万元</span><br /><span style='color:red'>冲刺目标: "+item.cctarget+"万元</span><br /><span style='color:green'>接单达成: "+item.htfinished+"万元</span><br /><span style='color:orange'>保底达成率: "+item.htrate+"%</span><br /><span style='color:red'>冲刺达成率: "+item.ccrate+"%</span><br /><span style='color:#1890FF'>出库达成："+item.finished+"万元</span>"
                    })),
                    itemStyle: {
                      color: 'orange', // 设置柱子的填充颜色为红色
                    },
                    label: {
                      show: true,
                      position: 'right',
                      formatter: '{c} 万元',
                      textStyle: {
                        color: 'aqua', // 设置标签字体颜色为红色
                        fontSize: 10,    // 设置标签字体大小
                      }
                    },
                  },
                  {
                    name: '冲刺目标',
                    type: 'bar',
                    barWidth: 10,
                    data: data4.map(item => ({
                      value: item.cctarget,
                      name: item.area,
                      extraInfo: "片区："+item.area+"<br/><span style='color:orange'>保底目标: "+item.target+"万元</span><br /><span style='color:red'>冲刺目标: "+item.cctarget+"万元</span><br /><span style='color:green'>接单达成: "+item.htfinished+"万元</span><br /><span style='color:orange'>保底达成率: "+item.htrate+"%</span><br /><span style='color:red'>冲刺达成率: "+item.ccrate+"%</span><br /><span style='color:#1890FF'>出库达成："+item.finished+"万元</span>"
                    })),
                    itemStyle: {
                      color: 'red', // 设置柱子的填充颜色为红色
                    },
                    label: {
                      show: true,
                      position: 'right',
                      formatter: '{c} 万元',
                      textStyle: {
                        color: 'aqua', // 设置标签字体颜色为红色
                        fontSize: 10,    // 设置标签字体大小
                      }
                    },
                  },
                  {
                    name: '接单达成',
                    type: 'bar',
                    barWidth: 10,
                    data: data4.map(item => ({
                      value: item.htfinished,
                      name: item.area,
                      extraInfo: "片区："+item.area+"<br/><span style='color:orange'>保底目标: "+item.target+"万元</span><br /><span style='color:red'>冲刺目标: "+item.cctarget+"万元</span><br /><span style='color:green'>接单达成: "+item.htfinished+"万元</span><br /><span style='color:orange'>保底达成率: "+item.htrate+"%</span><br /><span style='color:red'>冲刺达成率: "+item.ccrate+"%</span><br /><span style='color:#1890FF'>出库达成："+item.finished+"万元</span>"
                    })),
                    itemStyle: {
                      color: 'lightgreen', // 设置柱子的填充颜色为红色
                    },
                    label: {
                      show: true,
                      position: 'right',
                      formatter: '{c} 万元',
                      textStyle: {
                        color: 'aqua', // 设置标签字体颜色为红色
                        fontSize: 10,    // 设置标签字体大小
                      }
                    },
                  },
                  {
                    name: '出库达成',
                    type: 'bar',
                    barWidth: 10,
                    data: data4.map(item => ({
                      value: item.finished,
                      name: item.area,
                      extraInfo: "片区："+item.area+"<br/><span style='color:orange'>保底目标: "+item.target+"万元</span><br /><span style='color:red'>冲刺目标: "+item.cctarget+"万元</span><br /><span style='color:green'>接单达成: "+item.htfinished+"万元</span><br /><span style='color:orange'>保底达成率: "+item.htrate+"%</span><br /><span style='color:red'>冲刺达成率: "+item.ccrate+"%</span><br /><span style='color:#1890FF'>出库达成："+item.finished+"万元</span>"
                    })),
                    itemStyle: {
                      color: '#1890FF', // 设置柱子的填充颜色为红色
                    },
                    label: {
                      show: true,
                      position: 'right',
                      formatter: '{c} 万元',
                      textStyle: {
                        color: 'aqua', // 设置标签字体颜色为红色
                        fontSize: 10,    // 设置标签字体大小
                      }
                    },
                  }
                ]
              };
              areac4.setOption(option4);
            }
            this.switper()
          }else{
              this.pageflag = false;
              this.$Message.warning(res.msg);
          }
        })
        .catch(error => {
            console.error('请求失败:', error);
        });
    },
    //轮询
    switper() {
      if (this.timer) {
        return
      }
      let looper = (a) => {
        this.getData()
      };
      this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
    },
  },
};
</script>
<style lang='scss' scoped>
/* 修改所有标签的字体颜色 */
::v-deep .el-tabs__item {
  color: white; /* 默认字体颜色 */
}

/* 修改被激活的标签的字体颜色 */
::v-deep .el-tabs__item.is-active {
  color: aqua; /* 激活状态的字体颜色 */
}

/* 修改激活状态的标签的分割线颜色 */
::v-deep .el-tabs__item.is-active {
  border-bottom-color: #13ce66; /* 激活状态的标签底部颜色为绿色 */
}

::v-deep .el-tabs__active-bar {
	background-color:aqua;
}

</style>